<template>
  <div class="page">
    <div class="msg_item">
      <div class="msg_time">
        <div class="msg_time_text">2021.09.11  12:34:09</div>
      </div>
      <div class="msg_content content_text">
        <div class="msg_title">签到提醒</div>
        <div class="msg_text">这是消息的内容。</div>
      </div>
    </div>
    <!-- h5 -->
    <div class="msg_item">
      <div class="msg_time">
        <div class="msg_time_text">2021.09.11  12:34:09</div>
      </div>
      <div class="msg_content">
        <div class="content_h5">
          <div class="msg_title">签到提醒</div>
          <div class="msg_text">这是消息的内容。</div>
        </div>
        <div class="content_h5_btn gl_clear">
          <span class="gl_fl">点击查看详情</span>
          <i class="h5_btn_icon el-icon-arrow-right gl_fr" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

};
</script>

<style lang="scss" scoped>
  .page {
    padding: 0 0.2rem;
  }

  .msg_time {
    padding-top: 0.4rem;
  }
  .msg_time_text {
    font-size: 0.24rem;
    line-height: 0.34rem;
    text-align: center;
    color: #828282;
    padding-bottom: 0.16rem;
  }

  .msg_content {
    background: #FFFFFF;
    box-shadow: 0 0.02rem 0.15rem rgba(53, 69, 105, 0.1);
    border-radius: 0.12rem;
  }
  .content_text {
    padding: 0.3rem;
  }
  .msg_title {
    margin-bottom: 0.2rem;
    font-size: 0.32rem;
    line-height: 0.45rem;
    font-weight: 500;
    color: #354569;
  }
  .msg_text {
    font-size: 0.26rem;
    line-height: 0.36rem;
    color: #353434;
  }

  .content_h5 .msg_title {
    padding: 0.3rem 0.3rem 0;
  }
  .content_h5 .msg_text {
    padding: 0 0.3rem;
    margin-bottom: 0.2rem;
  }
  .content_h5_btn {
    padding: 0 0.3rem;
    font-size: 0.26rem;
    color: #353434;
    line-height: 0.88rem;
    border-top: 1px solid rgba(53, 69, 105, 0.1);
  }
  .h5_btn_icon {
    line-height: 0.88rem;
  }
</style>
